<template>
    <div class="search">
        <div class="search-obj">
            <div class="title">机构名称:</div> <el-input v-model="orgName" style="width: 300px" placeholder="机构名称"
                disabled />
        </div>
        <div class="search-obj">
            <div class="title"> 进件团队:</div> <el-select v-model="channel" placeholder="进件团队" style="width: 300px"
                clearable>
                <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
        <div class="search-obj">
            <div class="title">客户经理:</div>
            <el-select v-model="accountManager" placeholder="客户经理" style="width: 600px" clearable multiple>
                <template #label="{ label }">
                    <span>{{ label }} </span>
                    <span style="font-weight: bold">{{ value }}</span>
                </template>
                <el-option v-for="item in accountManagerList" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </div>
        <div class="search-obj-other">
            <div class="title">风险测评项:</div>
            <el-select v-model="riskItem" placeholder="风险测评项" style="width: 800px" clearable multiple>
                <template #label="{ label }">
                    <span>{{ label }} </span>
                    <span style="font-weight: bold">{{ value }}</span>
                </template>
                <el-option v-for="item in riskItemList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

    </div>
    <div class="submit">
        <el-button color="rgba(200, 16, 46, 100)">查询</el-button>
        <el-button color="rgb(220,220,220)" @click="clearable">重置</el-button>
    </div>
    <el-divider border-style="double" />
    <div class="contianer">
        <div class="contianer-one-title">
            分析报表
        </div>
        <div class="contianer-one-table">
            <el-table :data="accountManagerTableData" style="width: 100%" border>
                <el-table-column prop="name" label="客户经理" min-width="120" align="center" />
                <el-table-column label="尽责风险" min-width="300" align="center">
                    <template v-slot="scope">
                        <div class="risk-body">
                            <div class="risk-body-left">低</div> <el-slider v-model="scope.row.responsible" disabled />
                            <div class="risk-body-right">高</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="能力风险" min-width="300" align="center">
                    <template v-slot="scope">
                        <div class="risk-body">
                            <div class="risk-body-left">低</div> <el-slider v-model="scope.row.ability" disabled />
                            <div class="risk-body-right">高</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="道德风险" min-width="300" align="center">
                    <template v-slot="scope">
                        <div class="risk-body">
                            <div class="risk-body-left">低</div> <el-slider v-model="scope.row.morality" disabled />
                            <div class="risk-body-right">高</div>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="contianer-two-title">
            结果说明
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let accountManager = ref("")
const accountManagerList = [
    {
        value: '1',
        label: '张三',
    },
    {
        value: '2',
        label: '李四',
    },
    {
        value: '3',
        label: '王五',
    },
]
let riskItem = ref("")
const riskItemList = [
    {
        value: '1',
        label: '尽责风险',
    },
    {
        value: '2',
        label: '能力风险',
    },
    {
        value: '3',
        label: '道德风险',
    },
]
const accountManagerTableData = ref([{ name: "张三", responsible: 88, ability: 80, morality: 100 }, { name: "李四", responsible: 66, ability: 99, morality: 100 }, { name: "王五", responsible: 44, ability: 89, morality: 100 }])
</script>

<style scoped lang="scss">
.search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-left: 40px;


    .search-obj {
        margin-left: 1%;
        margin-top: 40px;
        width: 480px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-self: center;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }

    .search-obj-other {
        margin-left: 2.7%;
        margin-top: 40px;
        width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-self: center;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }
}

.submit {
    position: absolute;
    right: 100px;
    margin-top: 20px;
}

.el-divider {
    margin-top: 100px;
}

.contianer-one-title {
    font-size: 30px;
    font-weight: 600;
    margin-left: 6%;
}

.contianer-one-table {
    width: 60%;
    margin-left: 10%;
    margin-top: 40px;

    .el-slider {
        width: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .risk-body {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .risk-body-left {
            align-self: center;
        }

        .risk-body-right {
            align-self: center;
        }
    }
}

.contianer-two-title {
    margin-top: 80px;
    margin-left: 6%;
    font-size: 20px;
}
</style>